<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <STYLE>
        .topPanel{
            text-align: center;
            font-size: 16px;
        }
        .topPanel strong{
            font-size: 18px;
            font-weight: bolder;
        }
        /*
        //隐藏滚动条
        body::-webkit-scrollbar {display:none}
        */
    </STYLE>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 文章数据</strong></div>
    <div class="padding border-bottom">
        <div class="layui-row layui-col-space15 topPanel">
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">文章总数</div>
                    <strong th:text="${statistic.getArticlenum()}">19</strong>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">粉丝数</div>
                    <strong th:text="${fidSize}">11</strong>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">点赞数</div>
                    <strong th:text="${statistic.getZan()}">45</strong>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">评论数</div>
                    <strong th:text="${statistic.getCommentsNum()}">15</strong>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 topPanel" >
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">阅读数</div>
                    <strong th:text="${statistic.getHits()}">2381</strong>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">积分</div>
                    <strong th:text="${wallet.getPrice()}">249</strong>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">总排名</div>
                    <strong th:text="${rank}">85856</strong>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 20px;">收藏数</div>
                    <strong th:text="${chartSize}">10</strong>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 ">
            <div class="layui-col-md12" >
                <div class="layui-panel">
                   <div id="articleChart" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
   /* var datas=Array;*/
    $(function () {
        $.ajax({
            type:'post',
            url:'/chart/chartList',
            dataType: "json",
            async: false,
            success:function (data) {
               console.log(data);
               console.log(data.day)
                //3.初始化实例对象 echarts.init(dom容器)
                var myChart = echarts.init(document.getElementById('articleChart'));
                //myChart.showLoading();
                //4.指定配置项和数据
                option = {
                    title: {
                        text: '全部文章'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['浏览数', '评论数', '粉丝数', '收藏数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        /*data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']*/
                        data: data.day
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '浏览数',
                            type: 'line',
                            stack: '总量',
                          /*  data: [120, 132, 101, 134, 90, 230, 210]*/
                            data: data.hitNum,
                            smooth: true
                        },
                        {
                            name: '评论数',
                            type: 'line',
                            stack: '总量',
                            /*data: [220, 182, 191, 234, 290, 330, 310]*/
                            data: data.commentNum,
                            smooth: true
                        },
                        {
                            name: '粉丝数',
                            type: 'line',
                            stack: '总量',
                            /*data: [150, 232, 201, 154, 190, 330, 410]*/
                            data: data.followNum,
                            smooth: true
                        },
                        {
                            name: '收藏数',
                            type: 'line',
                            stack: '总量',
                           /* data: [320, 332, 301, 334, 390, 330, 320]*/
                            data: data.collectNum,
                            smooth: true
                        }
                    ]
                };
                //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    });

</script>
</html>